<!DOCTYPE html>
<html lang="en" xmlns:xmls="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" style="height: 100%;">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">
	
	<title>员工管理</title>
	<link href="../../static/asserts/css/bootstrap.min.css" rel="stylesheet">
	<link href="../../static/asserts/css/dashboard.css" rel="stylesheet">
	<style type="text/css">
		@-webkit-keyframes chartjs-render-animation {
			from { 
				opacity:0.99
			}
			to {
				opacity: 1
			}
		}
		@keyframes chartjs-render-animation {
			from { 
				opacity:0.99
			}
			to {
				opacity: 1
			}
		}
		.chartjs-render-monitor {
			-webkit-animation: chartjs-render-animation 0.001s;
			animation: chartjs-render-animation 0.001s;
		}
		.container-fluid {
			height: 100%;
			padding: 30px !important;
			background-color: #f5f7f9;
		}
		.mainClass {
			padding: 10px !important;
    		background-color: #fff;
    		border-radius: 10px;
			height: 100%;
		}
		.buttonRowClass {
		    height: 50px;
   			padding-top: 13px;
		}
		.buttonClass {
			width: 120px;
		    display: inline-block;
		    text-align: center;
		    border-radius: 4px;
		    height: 30px;
		    font-size: 14px;
		    line-height: 27px;
		    cursor:pointer;
		}
		.table {
			text-align: center;
		}
		.mainButtonClass {
			background-color: #2d8cf0;
			color: #fff;
		}
		.searchRowClass {
			display: inline-block;
	    	float: right;
		}
		.searchClass {
		    display: inline-block;
			height: 30px;
	    	font-size: 14px;
	    	width: 239px;
	    	position: relative;
    		top: 2px;
		}
	</style>
</head>

<body style="height:100%;">
	<div class="container-fluid">
		<main role="main" class="col-lg-12 pt-3 px-4 mainClass">
			<h2>Jfinal</h2>
			<div class="buttonRowClass">
				<div class="buttonClass mainButtonClass" onclick="addUser()">添加员工</div>
				<div class="searchRowClass">
					<input type="text" id="search" placeholder="查询员工" class="form-control searchClass">
					<div class="buttonClass mainButtonClass" style="width: 61px;" onclick="searchUser()">查询</div>
				</div>
			</div>
			<div class="table-responsive" style="height:calc(100% - 96px)">
				<table class="table table-striped table-sm">
					<thead>
						<tr>
							<th>操作</th>
							<th>序号</th>
							<th>用户名</th>
							<th>年龄</th>
							<th>性别</th>
						</tr>
					</thead>
					<tbody>
						<tr th:each="user: ${users}">
							<td style="width:100px;">
								<div class="buttonClass mainButtonClass" style="width: 38px;"
									th:onclick="|updateUser('${user.id}','${user.name}','${user.age}','${user.avatar}')|">修改</div>
								<div class="buttonClass"
									style="color: #fff; width: 38px; background-color: red; font-weight: inherit;"
									th:onclick="|deleteUser('${user.id}')|">删除</div>
							</td>
        					<td th:text="${userStat.index+1}" style="width:50px;"></td>
							<td th:text="${user.name}"></td>
							<td th:text="${user.age}"></td>
							<td th:text="${user.avatar}"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</main>
	</div>
	
	<script type="text/javascript" src="../../static/asserts/js/jquery-3.2.1.slim.min.js"></script>
	<script type="text/javascript" src="../../static/asserts/js/popper.min.js"></script>
	<script type="text/javascript" src="../../static/asserts/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../static/asserts/js/feather.min.js"></script>
	<script>
        feather.replace()
    </script>
	<script type="text/javascript" src="../../static/asserts/js/Chart.min.js"></script>
	<script>
		function addUser(){
			document.location.href = '/addUserPage'
		}
		
		function updateUser(id, name, age, avatar){
			document.location.href = '/updateUserPage?id='+id+'&name='+name+'&age='+age+'&avatar='+avatar
		}
		
		function deleteUser(id) {
			document.location.href = '/deleteUser?id='+id
		}
		
		function searchUser() {
			document.location.href = '/emps?query='+document.getElementById("search").value
		}
		
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
                datasets: [{
                    data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
                    lineTension: 0,
                    backgroundColor: 'transparent',
                    borderColor: '#007bff',
                    borderWidth: 4,
                    pointBackgroundColor: '#007bff'
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: false
                        }
                    }]
                },
                legend: {
                    display: false,
                }
            }
        });
    </script>
</body>
</html>